@import "function";
@import "var";
@import "mixin";

.header-default{
  position: relative;
  z-index:100;
  height:px2rem(90px);
  display: flex;
  background-color: $main_color;
  color: #ffffff;
  .back{
    cursor: pointer;
    height: 100%;
    width:px2rem(100px);
    flex: 0 0 px2rem(100px);
    padding-left:px2rem(30px);
    display: flex;
    align-items:center;
    .icon{
      width:px2rem(41px);
      height:px2rem(41px);
      background-image: url("../img/icon_left.png");
    }
    &.co{
      .icon{
        background-image: url("../img/icon_left_gray.png");
      }
    }
  }
  .more{
    @extend .back;
    .icon{
      background-image: url("../img/icon_more.png");
    }
  }
  .title{
    flex: 1;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content:center;
    font-size: px2rem(36px);
  }

}
